<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			h1 {
				vertical-align: middle;
				align-self: center;
			}
			
			.self-head {
				height: 20%;
				text-align: center;
				background: #EC971F;
			}
			
			.self-mvinfo {
				height: 20%;
				background: #2AC845;
			}
			
			.self-mvscndlist {
				height: auto;
				background: #0062CC;
			}
			
			.self-bottom {
				height: 7%;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="self-container">
			<div class="self-head">
				<br />
				<h1>美食详情</h1>
			</div>
			<div class="self-mvinfo">
				<div id="mvname" style="background: #F0AD4E;width: 100%;font-size: 20px;">
					幸福
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-hidden">cared
						<div id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="#">
							<img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">
							<div class="mui-media-body">
								<p id="type" class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p id="player" class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p id="time" class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								<p id="timelong" class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</div>
						</a>
					</li>

			</div>
			<div class="self-mvscndlist">
				<ul class="mui-table-view mui-table-view-chevron">
					
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">评论：<span id="cmnum">(3)</span></a>
						<ul id="cmlist" class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-hidden">cared
								<div id="M_Toggle" class="mui-switch mui-active">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
					</li>
					</ul>
			</div>
			<div class="self-botton mui-button-row">
				<button id="unext" class="mui-btn-blue">上一个</button>
				<button id="comnt" class="mui-btn-blue">评 	论</button>
				<button id="share" class="mui-btn-blue">分	享</button>
				<button id="keep" class="mui-btn-blue">收	藏</button>
				<button id="next" class="mui-btn-blue">下一个</button>
			</div>
		</div>

		<script>
			//初始化页面
			var h = document.documentElement.clientHeight;
			var container = document.getElementsByClassName("self-container");
			container[0].style.height = "580px";
			//读取内容
			//get值解析函数
			var $_GET = (function() {
				var url = window.document.location.href.toString();
				var u = url.split("?");
				if(typeof(u[1]) == "string") {
					u = u[1].split("&");
					var get = {};
					for(var i in u) {
						var j = u[i].split("=");
						get[j[0]] = j[1];
					}
					return get;
				} else {
					return {};
				}
			})();
			//页面数据初始化
			var did = $_GET['did'];
			
			console.log(did);
			
			var fdlist;
			setMoveInfo(did);
			var unext = document.getElementById("unext");
			var comnt = document.getElementById("comnt");
			var share = document.getElementById("share");
			var keep = document.getElementById("keep");
			var next = document.getElementById("next");
			unext.addEventListener("tap", function() {
				if(did <= 1) {
					return;
				} else {
					did--;
					console.log("挡墙电影序号：" + did);
					setMoveInfo(did);
				}
			});
			next.addEventListener("tap", function() {
				if(did >= fdlist.length) {
					return;
				} else {
					did++;
					console.log("挡墙电影序号：" + did);
					setMoveInfo(did);
				}
			});

			function encode() {
				var json = "{\'did\':";
				json += ("\'"+did+"\'" + ",\'typid\':\'美食\',"+"\'name\':");

				for(var i = 0; i < fdlist.length; i++) {
					if(fdlist[i].did == did) {
						json += "\'"+fdlist[i].label+"\'";
					}
				}

				json += "}";
				console.log(json)
				return json;
			}

			function store() {
				//alert("已点击收藏");

				var save = localStorage.getItem("save");
				if(save != null && save.trim() != "") {
					//JSON串中已经有东西继续添加
					
					var j = encode()
					console.log(save.toString())
//					var list = eval('('+save+')')
					
					save=save.replace("]",',')
					save+=j
					save=save+"]"
					
					localStorage.setItem("save", save)

				} else {
					//JSON串中还没有东西，首次添加
					
					var j = encode()
					var json = "[" + j + "]"
					
					localStorage.setItem("save", json);
				}

			}

			var btn = document.getElementById("keep");
			btn.addEventListener("tap", store);

			//设置电影信息函数
			function setMoveInfo(did) {
				//获取美食基础信息
				mui.ajax("http://www.liwbiy.com:8080/Leisurelife/dealcmd", {
					type: "post",
					data: {
						cmd: "301"
					},
					success: function(data) {
						var json = eval('(' + data + ')');
						var foods = json.list;
						fdlist = foods;
						for(var i = 0; i < foods.length; i++) {
							if(foods[i].did == did) {
								var fdname = document.getElementById("mvname");
								mvname.innerHTML = foods[i].label;
								var type = document.getElementById("type");
								type.innerHTML = foods[i].addr;
								var player = document.getElementById("player");
								player.innerHTML = "人均：" + foods[i].avg;
								var time = document.getElementById("time");
								time.innerHTML = "名字：" + foods[i].name;
								var timelong = document.getElementById("timelong");
								timelong.innerHTML = "用餐愉快！";
							}
						}
					},
					error: function() {
						mui.alert("00网络连接出错");
					}
				});
				//获取电影描述和时长
				mui.ajax("http://www.liwbiy.com:8080/Leisurelife/dealcmd", {
					type: "post",
					data: {
						cmd: "302",
						did: did
					},
					success: function(data) {
						var json = eval('(' + data + ')');
						var fddesc = document.getElementById("mvdesc");
						mvdesc.innerHTML = json.name;
						//var timelong = document.getElementById("timelong");
						//timelong.innerHTML = json.tlong;
					},
					error: function() {
						mui.alert("11网络连接出错");
					}
				});
				//获取评论
				mui.ajax("http://www.liwbiy.com:8080/Leisurelife/dealcmd", {
					type: "post",
					data: {
						cmd: "2",
						type: "1",
						tid: did
					},
					success: function(data) {
						var json = eval('(' + data + ')');
						var result = json.list;
						var cmnum = document.getElementById("cmnum");
						cmnum.innerHTML = '(' + result.length + ')';
						var cmlist = document.getElementById("cmlist");
						for(var i = 0; i < result.length; i++) {
							var liE = document.createElement("li");
							liE.className = "mui-table-view-cell mui-media";

							var imgE = document.createElement("img");

							var divE = document.createElement("div");
							divE.className = "mui-media-body";

							var pnameE = document.createElement("p");
							pnameE.className = "mui-ellipsis";
							pnameE.innerHTML = result[i].username + " " + result[i].time;

							var pcotntE = document.createElement("p");
							pcotntE.className = "mui-ellipsis";
							pcotntE.innerHTML = result[i].content;

							divE.appendChild(pnameE);
							divE.appendChild(pcotntE);

							liE.appendChild(imgE);
							liE.appendChild(divE);

							cmlist.appendChild(liE);
						}
					},
					error: function() {
						mui.alert("22网络连接出错");
					}
				});
			}
		</script>
	</body>

</html>